<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>

 <div style="margin-top: 50px">
     <div class="layui-form-item">
         <div class="layui-inline">
             <label class="layui-form-label">收货人</label>
             <div class="layui-input-inline">
                 <input type="text" placeholder="收货人" id="cname"  class="layui-input">
             </div>
         </div>
         <div class="layui-inline">
             <label class="layui-form-label">收货地址</label>
             <div class="layui-input-inline">
                 <input type="text" placeholder="收货地址"  id="address" class="layui-input ">
             </div>
         </div>
         <div class="layui-inline">
             <button class="layui-btn" id="addBtn">添加用户</button>
         </div>
     </div>


  <hr>

  <table class="layui-table">
       <thead>
       <tr>
           <td>用户编号</td>
           <td>姓名</td>
           <td>收货地址</td>
           <td>操作</td>
       </tr>
       </thead>
       <tbody id="showData"></tbody>
  </table>
 </div>
</body>
</html>
<script src="js/jquery-3.1.0.min.js"></script>
<script>

    $(()=>{
        //加载所有的数
        function getdatas(){
            //全写（完成的写法）
            $.ajax({
                url:"http://localhost:8080/web_3_ajax/showAll",
                type:"get",
                dataType:"json",
                success:(result)=>{
                    let str="";
                    console.log(result);
                    if(result.code==1){

                        $.each(result.data,(i,customer)=>{
                            str+=`<tr>
                                 <td>${customer.cid}</td>
                                  <td>${customer.cname}</td>
                                  <td>${customer.address}</td>
                                  <td>

                                    <a class="layui-btn lay layui-btn-warm updateBtn" href='showInfo.html?cid=${customer.cid}'>修改</a>
                                      &nbsp; &nbsp; &nbsp;
                                     <button  type="button" class="layui-btn layui-btn-danger delBtn" id="${customer.cid}" >删除</a>
                                  </td>
                                 </tr>`
                        });

                        //把数据写入到页面上
                        $("#showData").html(str);

                    }else{
                        alert(result.msg);
                    };
                }
            });

        }
        //初始化数据
        getdatas();

    //-添加----------------------------------------------------------

        $("#addBtn").click(()=>{

            $.ajax({
                url:"add",
                type:"post",
                data:{"cname":$("#cname").val(),
                      "address":$("#address").val()
                },
                dataType:"json",
                success:(result)=>{
                   // console.log(result);
                    if(result.code==1){
                     alert(result.msg);
                     //重新获得数据
                     getdatas();

                    }
                }

            });
        });
        // ----删除-------------------------------
          $("#showData").on("#showData button").click(function(e){

               let obj = e.target;

                if(obj.nodeName=='BUTTON'){
                    let deletId =  e.target.id;
                    if(window.confirm("请确定要删除吗?")){
                        $.ajax({
                            url:"delete",
                            type:"post",
                            data:{"cid":deletId
                            },
                            dataType:"json",
                            success:(result)=>{
                                // console.log(result);
                                if(result.code==1){
                                    alert(result.msg);
                                    //重新获得数据
                                    getdatas();
                                }
                            }
                        });
                    }
                }
          })
    });

</script>